<template>
  <div class="center~ flex-col">
    <div class="image image~" :style="sizeStyle"></div>
    <div class="text-sm text-gray-300">{{ message }}</div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  message?: string
  size?: string
}

const rawProps = withDefaults(defineProps<Props>(), {
  message: "当前暂无内容...",
  size: "80"
})
const {message, size} = toRefs(rawProps)
const sizeStyle = computed(() => {
  return `width: ${size.value}px; height: ${size.value}px`
})
</script>

<style scoped>
.image {
  width: 80px;
  height: 80px;
  background-image: url("../../assets/noContent.png");
}
</style>